import React, { useEffect, Component } from 'react';
//import './MapComponent.css';
import { meshLog, SPRemove, SPGet, SPSet } from '../config/index';
import Pole from "../latAndLng/pole.js";
import Camera from "../latAndLng/camera.js";
import Line from '../latAndLng/line.js'

export default class MapComponent extends Component {
    constructor(a) {
        super(a);
        this.state = {
            alldate: false,
            pole: true,
            camera: false,
            light: false,
            sensor: false,
            keyvalue: ['pole']

        }
    }
    componentDidMount() {
        //useEffect(() => {
        const script = document.createElement('script');
        script.src = "https://map.qq.com/api/gljs?v=1.exp&key=T6SBZ-MEV6W-GYRRK-YLB4N-GHWY5-5OFXU";
        script.charset = "utf-8";
        script.onload = () => {
            if (window.TMap) {
                this.initMap();
            }
        };
        document.body.appendChild(script);
    }



    initMap = () => {
        const map = new window.TMap.Map('mapContainer', {
            center: new window.TMap.LatLng(31.31123852259022, 120.69704733065794),
            zoom: 14,
            showControl: false,
            doubleClickZoom: false
        });

        var polylineArr = Line


        const polylineLayer = new window.TMap.MultiPolyline({
            id: 'polyline-layer',
            map: map,
            styles: {
                'style_blue': new window.TMap.PolylineStyle({
                    'color': '#3777FF',
                    'width': 6,
                    'borderWidth': 5,
                    'borderColor': '#FFF',
                    'lineCap': 'butt'
                }),
                'style_red': new window.TMap.PolylineStyle({
                    'color': '#CC0000',
                    'width': 6,
                    'borderWidth': 5,
                    'borderColor': '#CCC',
                    'lineCap': 'round'
                })
            },
            geometries: polylineArr
        });


    };

    Changediv1 = (date) => {
        meshLog('456', date);
    };

    render() {

        return (

            <div>
                <div id="mapContainer" style={{ height: 950 }}  ></div>
            </div>
        );
    }
}
